<template>
	<view>
		<view class=".money-wrapper">
			<view>
				<view class="top-title">
					<text>净资产：</text>
				</view>
				<view class="money">
					<text>{{netAssets}}</text>
				</view>
			</view>
			<view class="bottom-title">
				<view class="left-title">
					<text style="color: #82848a;">负债：</text>
					<text>{{liability}}</text>
				</view>
				<view class="right-titlt">
					<text style="color: #82848a;">总资产：</text>
					<text>{{totalAssets}}</text>
				</view>
			</view>
		</view>
		
		<view class="drivider">
			<u-divider lineColor="#82848a"></u-divider>
		</view>
		
		<view class="title">
			<text>我的账户</text>
		</view>
		
		<view class="cell-group" v-for="(item1, index1) in account_list" :key="index1">
			<view class="cell-icon">
				<u-icon :name="item1.accountIcon" size="40"></u-icon>
			</view>
			<view class="cell-item" @click="getAccountInfo(index1)">
				<view class="cell-info">
					<view class="info-text">
						<text>{{item1.accountName}}</text>
					</view>
					<view class="info-remarks">
						<text>{{item1.accountType}}</text>
					</view>
				</view>
				<view class="cell-money">
					<text>{{item1.accountMoney}}</text>
				</view>
			</view>
		</view>
		
		<view class="button">
			<view class="submit-button">
				<u-button type="primary" icon="rmb-circle-fill" text="转账" @click="getAddTransfer()"></u-button>
			</view>
		</view>
		
		<view class="button">
			<view class="submit-button">
				<u-button type="success" icon="plus-square-fill" text="添加账户" @click="getAddAccount()"></u-button>
			</view>
		</view>
		
		<view class="title">
			<text>借款管理</text>
		</view>
		
		<view class="cell-group" v-for="(item1, index1) in borrow_list" :key="index1">
			<view class="cell-icon">
				<u-icon :name="item1.borrowIcon" size="40"></u-icon>
			</view>
			<view class="cell-item" @click="getInAndOurflow(index1)">
				<view class="cell-info">
					<view class="info-text">
						<text>{{item1.borrowText}}</text>
					</view>
					<view class="info-remarks">
						<text>{{item1.borrowType}}</text>
					</view>
				</view>
				<view class="cell-money">
					<text>{{item1.borrowMoney}}</text>
				</view>
			</view>
		</view>
		
		<view class="button">
			<view class="submit-button">
				<u-button type="primary" icon="edit-pen-fill" text="新建借款" @click="getAddBorrow()"></u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				liability: 0,	//负债
				netAssets: 0,	//净资产
				totalAssets: 0,		//总资产
				account_list: [],
				borrow_list: [
					{"borrowIcon": "/static/account/lend.png","borrowText": "借出","borrowType": "应收","borrowMoney": 0,"borrowState": 0},
					{"borrowIcon": "/static/account/borrow.png","borrowText": "借入","borrowType": "应还","borrowMoney": 0,"borrowState": 1}
				]
			}
		},
		onLoad(options){
			this.load(uni.getStorageSync('userId'))
			this.getSumMoney()
		},
		onPullDownRefresh() {
			this.load(uni.getStorageSync('userId'))
			this.getSumMoney()
			uni.stopPullDownRefresh()
		},
		methods: {
			load(userId) {
				let params = {
					"userId" : userId
				}
				const _this = this
				
				uni.request({
					header: {
						  'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token')  
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/account/loadaccount",
					method: 'POST',
					data: params,
					success (res) {
						_this.account_list = res.data.data
						
					}
				})
			},
			getAddAccount() {
				uni.navigateTo({
					url: "/pages/account/addaccount"
				})
			},
			getAccountInfo(index) {
				let userId = uni.getStorageSync('userId')
				let accountId = this.account_list[index].accountId
				let accountName = this.account_list[index].accountName
				let data = {
					"userId" : userId,
					"accountId" : accountId,
					"accountName": accountName
				}
				uni.navigateTo({
					url: "/pages/account/accountInfo?data="+JSON.stringify(data)
				})
			},
			getInAndOurflow(index) {
				let data = {
					"borrowState": this.borrow_list[index].borrowState
				}
				uni.navigateTo({
					url: "/pages/account/inAndOutflow?data="+JSON.stringify(data)
				})
			},
			getAddTransfer() {
				uni.navigateTo({
					url: "/pages/account/addTransfer"
				})
			},
			getAddBorrow() {
				uni.navigateTo({
					url: "/pages/account/addBorrow"
				})
			},
			getSumMoney() {
				let params = {
					"userId": uni.getStorageSync('userId')
				}
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token') 
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/account/summoney",
					method: 'POST',
					data: params,
					success(res) {
						_this.netAssets = res.data.data.netAssets
						_this.totalAssets = res.data.data.totalAssets
						_this.liability = res.data.data.liability
						_this.borrow_list[0].borrowMoney = res.data.data.outflow
						_this.borrow_list[1].borrowMoney = res.data.data.inflow
					}
				})
			}
		},
	}
</script>

<style>
	.money-wrapper{
		margin-top: 50rpx;
		margin-left: 30rpx;
	}
	.top-title{
		font-size: 40rpx;
		color: #82848a;
	}
	.money{
		font-size: 65rpx;
		font-weight: bolder;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.bottom-title{
		font-size: 40rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.left-title{
		width: 250rpx;
	}
	.right-titlt{
		width: 350rpx;
		
	}
	.drivider {
		height: 20rpx;
		background-color: #c8c9cc;
	}
	.title {
		font-size: 45rpx;
		margin-left: 30rpx;
		margin-top: 50rpx;
	}
	
	.cell-group {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		margin-left: 45rpx;
		margin-right: 45rpx;
		
	}
	.cell-icon {
		width: 85rpx;
		height: 85rpx;
		display: flex;
		align-items: center;

		border-radius: 100%;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
	}
	.cell-item {
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		border-bottom: #c8c9cc;
		border-style: hidden hidden solid hidden;
		border-width: 1rpx;
	}
	.cell-info {
		width: 340rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-left: 30rpx;
	}
	.info-text {
		font-size: 35rpx;
		width: 400rpx;
		display: flex;
		align-items: center;
	}
	.info-remarks {
		width: 400rpx;
		color: #909399;
	}
	.cell-money {
		width: 200rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		font-size: 40rpx;
		font-weight: bolder;
		
	}
	
	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	.submit-button{
		width: 400rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: black;
	}
</style>
